<template>
    <div class="Canvas">
        <canvas ref="canvas"></canvas>
        <div class="Refresh-box">请使用微信扫码登录
            <span @click="chiRefreshqrcode" class="Refresh">
                <el-icon>
                    <RefreshLeft />
                </el-icon>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import QRCode from 'qrcode';
import { onMounted, ref, toRefs, watch } from 'vue';
const Emit = defineEmits(['chiRefreshqrcode']);
interface Props {
    CodeValue: string,                                   // 二维码的内容值。
    size?: number,                                   // 二维码大小。
    margin?: number,                                 // 定义空白区的宽度应该是多少。
    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H',    // 维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。
    dark?: string,
    light?: string,
}
const props = withDefaults(defineProps<Props>(), {
    CodeValue: '',
    size: 190,
    margin: 3,
    level: 'M',
    light: '#fff',
    dark: '#000',
});

const canvas = ref<HTMLCanvasElement | null>(null);

// 监听二维码的改变
watch(props, () => {
    Qrcode();
}, { deep: true, immediate: true });
// 页面渲染期 添加二维码
onMounted(() => {
    Qrcode();
});

function Qrcode() {
    const canvasDom = canvas.value as HTMLCanvasElement;
    // 第一个参数为 canvas画板
    // 第二个参数为 我们想要把字符串转二维码的 字符串
    // 第三个参数为 配置对象
    // 第四个参数为 一个完成后的回调函数
    QRCode.toCanvas(canvasDom, props.CodeValue, {
        errorCorrectionLevel: props.errorCorrectionLevel,
        width: props.size,
        margin: props.margin,
        color: {
            dark: props.dark,
            light: props.light
        }
    }, (error: any) => {
        if (error) console.error(error);
        console.log('success!');
    });
};
const chiRefreshqrcode = () => {
    Emit('chiRefreshqrcode');
};
</script>

<style scoped lang="scss">
.Canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    user-select: none;

    .Refresh-bo {
        display: flex;
        align-items: center;
        justify-content: center;

        .Refresh {
            cursor: pointer;
        }
    }

}
</style>